<template>
  <div>
    <div class="home-page-my-enterprise" v-if="isJoin">
      <Row class="home-page-content">
        <h3>我的企业</h3>
      </Row>

      <Row
        class="home-page-content mt-20"
        justify="space-between"
        align="middle"
      >
        <h3>{{ info.companyName }}</h3>
        <BtnText type="primary" @BtnClick="goToHistory('info')"
          >变更历史记录</BtnText
        >
      </Row>

      <HistoryChange v-model="modelValueHistory" :companyId="info.companyId" />

      <div class="home-page-content mt-20">
        <InfoPage :info="info" isEdit @revoke="onRevoke" />
      </div>
      <div class="home-page-content mt-20">
        <RulePage :info="info" isEdit @revoke="onRevoke" />
      </div>

      <div class="home-page-content mt-20">
        <h4>备案项目</h4>
        <Table
          class="mt-20"
          :columns="columnsProject"
          :data="info.busiInfoList"
        ></Table>
      </div>
    </div>
    <!-- 是否加入企业 -->
    <div class="home-page-join-my-enterprise" v-else>
      <Row class="home-page-content">
        <h3>
          <BtnBox isIcon type="light-blue" text="返回" @BtnClick="backHone()" />
          <span>加入现有企业</span>
        </h3>
      </Row>
      <div class="home-page-content home-page-join-content mt-20">
        <h3>企业基本信息</h3>
        <Row type="flex">
          <Col span="6">
            <CheckCompany
              :parentCompanyId.sync="formData.joinCompanyId"
              @parentCompanyObj="parentCompanyObj"
            />
          </Col>
        </Row>
        <Row type="flex">
          <Col span="6" v-if="formData.joinCompanyId">
            <div class="select-company-check">
              <div class="select-company-item">
                <span>{{ parentCompany.companyName }}</span>
                <Checkbox disabled v-model="joinCompany"></Checkbox>
              </div>
            </div>
          </Col>
        </Row>
        <Row type="flex">
          <Col span="24">
            <Button
              type="primary"
              :disabled="!formData.joinCompanyId"
              :loading="isLoading"
              @click="headleSubmit"
              >提交</Button
            >
          </Col>
        </Row>
      </div>
    </div>
  </div>
</template>

<script>
import { UserJoinCompany } from "@/api/account.js";
import { myCompanyInfo, cancelCompanyCheck } from "@/api/enterpriseManage.js";

import CheckCompany from "@/pages/account/register/components/checkCompany.vue";
import InfoPage from "./common/infoPage.vue";
import RulePage from "./common/rulePage.vue";
import HistoryChange from "@/pages/components/historyChange";

export default {
  name: "myEnterprise",
  components: {
    CheckCompany,
    InfoPage,
    RulePage,
    HistoryChange,
  },
  data() {
    return {
      isJoin: true,
      info: {},
      columnsProject: [
        {
          title: "项目名称",
          key: "projectName",
        },
        {
          title: "业主方",
          key: "ownerCompanyName",
        },
        {
          title: "施工方",
          key: "constructionName",
        },
        {
          title: "项目地址",
          key: "projectAddressName",
        },
        {
          title: "预计产值规模(万元)",
          key: "outputScale",
        },
        {
          title: "发布时间",
          key: "publishTime",
        },
      ],
      joinCompany: true,
      formData: {
        isRegisterNewCompany: false, // 是否注册公司
        joinCompanyId: "",
      },
      isLoading: false,
      modelValueHistory: false,
    };
  },
  created() {
    let { isJoin } = this.$route.query;
    this.isJoin = !isJoin;
    if (isJoin != 1) {
      this.init();
    }
  },
  methods: {
    async init() {
      const info = await myCompanyInfo({});
      info.serviceTypeName =
        info.serviceType &&
        info.serviceType.map((o) => o.serviceTypeName).join("，");
      info.serviceAreaName =
        info.serviceArea &&
        info.serviceArea
          .map((o) => o.provinceName + "-" + (o.cityName && o.cityName != ' ' ? o.cityName : "全部"))
          .join("，");
          console.log(info.serviceArea,'info.serviceArea')
      this.info = info;
    },

    // 去历史列表页
    goToHistory(type) {
      this.modelValueHistory = true;
      // const companyId = this.info.companyId
      // this.$router.push({ path: '/enterpriseHistory', query: { type, companyId } })
    },

    backHone() {
      this.$router.push({
        name: "home",
      });
    },
    parentCompanyObj(item) {
      this.parentCompany = item;
      this.isBtnDisabled = false;
    },
    // 加入现有企业
    async headleSubmit() {
      let params = {
        companyId: this.formData.joinCompanyId,
      };
      this.isLoading = true;
      let data = await UserJoinCompany(params);
      this.$Message.success("加入企业成功，请重新登录！");
      this.$router.push({
        name: "login",
      });
      this.isLoading = false;
    },
    // 撤销
    async onRevoke(companyUpdateType) {
      const request = {
        companyUpdateType,
        companyId: this.info.companyId,
      };
      await cancelCompanyCheck(request);
      this.$Message.success("撤销成功!");
      this.init();
    },
  },
};
</script>

<style lang="less" scoped>
.mt-20 {
  margin-top: 20px;
}
.home-page-join-my-enterprise {
  h3 {
    display: flex;
    align-items: center;
    span {
      margin-left: 10px;
    }
  }
}
.home-page-join-content {
  h3 {
    margin-bottom: 20px;
  }
  .ivu-btn {
    margin-top: 20px;
  }
}

.select-company-item {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  margin-top: 20px;
  border: 1px solid #c4c4c4;
  border-radius: 4px;
}
</style>
